<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>组合框</title>
	<script type="text/javascript" src="../easyui-config.js"></script>
</head>
<body>
	<div>
		<input id="combo1" />
	</div>
	
	<div class="easyui-linkbutton" text="options" 
		 onclick="let result = $('#combo1').combo('options'); showTip(JSON.stringify(result)); " ></div>
	
	
	<div class="easyui-linkbutton" text="panel" 
		 onclick="let result = $('#combo1').combo('panel'); showTip(result); " ></div>
	
	
	<div class="easyui-linkbutton" text="textbox" 
		 onclick="let result = $('#combo1').combo('textbox'); showTip(result); " ></div>
	
	
	<div class="easyui-linkbutton" text="destroy" 
		 onclick="$('#combo1').combo('destroy');" ></div>
		 
	<div class="easyui-linkbutton" text="resize" 
		 onclick="$('#combo1').combo('resize',500);" ></div>
		 
	<div class="easyui-linkbutton" text="showPanel" 
		 onclick="$('#combo1').combo('showPanel');" ></div>
		 
	<div class="easyui-linkbutton" text="hidePanel" 
		 onclick="$('#combo1').combo('hidePanel');" ></div>
		 
	<div class="easyui-linkbutton" text="disable" 
		 onclick="$('#combo1').combo('disable');" ></div>
		 
	<div class="easyui-linkbutton" text="enable" 
		 onclick="$('#combo1').combo('enable');" ></div>
		 
	<div class="easyui-linkbutton" text="readonly" 
		 onclick="$('#combo1').combo('readonly',true);showTip('不可输入文本')" ></div>
		 
	<div class="easyui-linkbutton" text="validate" 
		 onclick="$('#combo1').combo('validate');" ></div>
		 
	<div class="easyui-linkbutton" text="isValid" 
		 onclick="let result = $('#combo1').combo('isValid');showTip(result);" ></div>
		 
	<div class="easyui-linkbutton" text="clear" 
		 onclick="$('#combo1').combo('clear');" ></div>		
		 
	<div class="easyui-linkbutton" text="reset" 
		 onclick="$('#combo1').combo('reset');" ></div>

	<div class="easyui-linkbutton" text="getValues" 
		 onclick="let result = $('#combo1').combo('getValues');showTip(result.join(';'));" ></div>
		 
	<div class="easyui-linkbutton" text="setValues" 
		 onclick="$('#combo1').combo('setValues',[ 'value1','value2','value3' ]);" ></div>


	<div class="easyui-linkbutton" text="getValue" 
		 onclick="let result = $('#combo1').combo('getValue');showTip(result);" ></div>
		 
	<div class="easyui-linkbutton" text="setValue" 
		 onclick="$('#combo1').combo('setValue','你好呀!!!');" ></div>
		 

	<script>
		$(()=>{
			$('#combo1').combo({
				required:true/* 是否必填 */
				,multiple:true /* 支持多选 */
				,multivalue:true /* 是否提交多个值 */
				,separator:';' /* 多选文本时分隔符 */
				,width:200 /* 组合框宽 */
				,height:50 /* 组合框高 */
				,panelWidth:300 /* 下拉框宽 */
				,panelHeight:300 /* 下拉框高 */
				,panelMinWidth:100
				,panelMaxWidth:600
				,panelMinHeight:100
				,panelMaxHeight:500
				,panelAlign: 'right' /* 下拉框对齐方式 'left', 'right'*/
				,reversed:true /* 文本框失去焦点后是否恢复原值 */
				,selectOnNavigation:true /* 使用键盘导航项目时是否选择项目 */
				,editable:true /* 文本框是否可输入 */
				,disabled:false /* 禁用文本框 */
				,readonly:false /* 只读 */
				,hasDownArrow:true /* 显示下拉框右侧下拉箭头 */
				,value:'下拉框默认值' /* 下拉框默认值*/
				,delay:10 /* 输入最后一个字符后,延时多久展开下拉框 */
				,keyHandler: {
					up: function(e){ showTip(e); },
					down: function(e){ showTip(e); },
					left: function(e){ showTip(e); },
					right: function(e){ showTip(e); },
					enter: function(e){ showTip(e); },
					query: function(q,e){ showTip([q,e]); }
				}
				/* 事件 */
				,onShowPanel:function(){
					showTip('展开下拉框');
				}
				,onHidePanel:function(){
					showTip('收起下拉框');
				}
				,onChange:function(newValue, oldValue){
					showTip('新值:'+newValue+' 旧值:'+oldValue);
				}
			});
		});
		
		function showTip(msg){
			console.log(msg);
			$.messager.tip({
				msg:msg,
				icon:'info',
				timeout:2000
			});
		}
	</script>
</body>
</html>